<template>
    <div id="v-model">
        <el-dialog
            :title="titleCon"
            v-model="isModelDialog" 
            draggable 
            :close-on-click-modal="false" 
            width="40%" 
            :before-close="handleClose"
            :destroy-on-close="true"
        >
            <el-divider content-position="left"> {{ titleInfo }} </el-divider>
            <el-table class="table-s" :data="rectifyListArr" style="width: 100%" border>
                <el-table-column min-width="270" prop="fileOriginName" :show-overflow-tooltip="true" :label="$t('5l2R6NiV8F5KyemPq8xq')"  align="center" />
                <el-table-column min-width="160" prop="createdTime" :show-overflow-tooltip="true" :label="$t('4pvjWhhdT5Nk2JMc5rQg')"  align="center" />
                <el-table-column min-width="120" prop="createdUserName" :show-overflow-tooltip="true" :label="$t('8GbxAmDauKsBrgrQQa2')"  align="center" />
                <el-table-column min-width="120" :show-overflow-tooltip="true" :label="$t('dScKg8pBv4cupCrxspq1r')"  align="center">
                    <template #default="scope">
                        <img style="width: 30px;height: 20px;" :src="pathData + scope.row.path" />
                    </template>
                </el-table-column>
                <el-table-column min-width="120" :show-overflow-tooltip="true" :label="$t('liBmO8wb58NMw5HLu9Nf')"  align="center"  fixed="right">
                    <template #default="scope">
                        <el-link target="_blank" :href="pathData + scope.row.path" type="primary">{{ $t('i8A6uFe7Z4rYBFs9LUfm') }}</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <template #footer>
                <el-button @click="cancelUseClick">关闭</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive , computed , toRef , toRefs , watch } from 'vue'
import { ElButton, ElDialog, ElDivider, ElTable, ElTableColumn } from 'element-plus'
export default defineComponent( {
    name: 'v-model',
    components: {},
    props: {
        isModelDialog:{
            type: Boolean,
            default: false,
        },
        fileInfo: {
            type: String,
            default: ''
        }
    },
    setup(props,ctx){
        const titleCon = ref();
        const rectifyListArr = ref();
        const pathData = ref(import.meta.env.VITE_API_URL + '/') // 获取地址
        const titleInfo = ref();

        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            cancelUseClick();
        }

        /*** cancelUseClick 取消事件 */
        const cancelUseClick = () => {
            ctx.emit('cancelModelClick')
        }

        /*** 监听isModelDialog的变化 */
        watch(() => props.isModelDialog,(newVal) => {
            if(newVal){
                titleCon.value = '附件预览';
                let getInfo = JSON.parse(props.fileInfo);
                titleInfo.value = getInfo.titleInfo;
                if(Array.isArray(getInfo.rectifyListArr)){
                    rectifyListArr.value = getInfo.rectifyListArr;
                }else{
                    let setArr = [];
                    setArr.push(getInfo.rectifyListArr);
                    rectifyListArr.value = setArr;
                }
            }
        })

        /*** isModelDialog 响应弹窗的关闭  */
        const isModelDialog = computed(() => {
            return props.isModelDialog
        })

        return {
            handleClose,
            cancelUseClick,
            titleCon,
            isModelDialog,
            pathData,
            rectifyListArr,
            titleInfo,
        }
    },
} )
</script>
<style scoped lang="scss">
</style>